[babel-plugin][legacy] Polyfill logical float values #1237

abhakat · 2025-09-22T21:32:17Z

What changed / motivation ?

context

Linked PR/Issues

Fixes #1217

Additional Context

npm test passes

updated the snapshots for anything my changes impact

Pre-flight checklist

I have read the contributing guidelines
Contribution Guidelines
Performed a self-review of my code

mellyeliu

Awesome, thanks for taking this on! Some follow ups :)

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/index.js

mellyeliu · 2025-09-22T23:44:50Z

packages/@stylexjs/babel-plugin/__tests__/legacy/transform-legacy-polyfills-test.js

              {
                "ltr": ".xodj72a{clear:right}",
-                "rtl": ".xodj72a{clear:left}",
+                "rtl": ".xodj72a{clear:var(--1t497je)}",


hmm, we should be seeing this as the output:

"ltr": ".xodj72a{clear:var(--1t497je)}"", "rtl": null,

😮 I had that earlier but thought it was wrong

might have to change some of the logic

removing the float mappings in generateRtl should fix it :)

the context is with this change we can get rid of the rtl field completely! we'll have one value that autoflips

mellyeliu · 2025-09-22T23:46:14Z

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js

+
+// Export both the expansions object and the processing function
 export default expansions as typeof expansions;
+export { processProperty };


do we need this anywhere?

Nope, I will remove it

mellyeliu · 2025-09-22T23:54:01Z

packages/@stylexjs/babel-plugin/src/shared/physical-rtl/generate-rtl.js

-}> = {
-  float: ([key, val]) => [key, logicalToPhysical[val] ?? val],
-  clear: ([key, val]) => [key, logicalToPhysical[val] ?? val],
+  start: `var(${LOGICAL_FLOAT_END_VAR})`,


looking closer, the float mapping in legacy-expand-shorthands should be enough, we don't need to add handling in generate-rtl.js or generate-rtl.js, we just need to remove the blocks listed in #1217

mellyeliu · 2025-09-22T23:55:07Z

packages/@stylexjs/babel-plugin/src/shared/physical-rtl/generate-rtl.js

+  start: `var(${LOGICAL_FLOAT_END_VAR})`,
+  end: `var(${LOGICAL_FLOAT_START_VAR})`,
+  'inline-start': `var(${LOGICAL_FLOAT_END_VAR})`,
+  'inline-end': `var(${LOGICAL_FLOAT_START_VAR})`,


Suggested change

start: `var(${LOGICAL_FLOAT_END_VAR})`,

end: `var(${LOGICAL_FLOAT_START_VAR})`,

'inline-start': `var(${LOGICAL_FLOAT_END_VAR})`,

'inline-end': `var(${LOGICAL_FLOAT_START_VAR})`,

mellyeliu · 2025-09-22T23:57:28Z

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js

+    if (value === 'inline-start') {
+      return [[property, `var(${LOGICAL_FLOAT_START_VAR})`]];
+    } else if (value === 'inline-end') {
+      return [[property, `var(${LOGICAL_FLOAT_END_VAR})`]];
+    }


Suggested change

if (value === 'inline-start') {

return [[property, `var(${LOGICAL_FLOAT_START_VAR})`]];

} else if (value === 'inline-end') {

return [[property, `var(${LOGICAL_FLOAT_END_VAR})`]];

}

if (value === 'inline-start' || value === 'start') {

return [[property, `var(${LOGICAL_FLOAT_START_VAR})`]];

} else if (value === 'inline-end' || value === 'end') {

return [[property, `var(${LOGICAL_FLOAT_END_VAR})`]];

}

mellyeliu · 2025-09-22T23:58:55Z

Almost, just a couple more fixes!

mellyeliu

Changes look good! Let's hold off on merging this for now because this will involve a prerequisite change on the Haste side

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js

github-actions · 2025-10-30T16:28:52Z

workflow: benchmarks/perf

Comparison of performance test results, measured in operations per second. Larger is better.

[email protected] compare
node ./compare.js /tmp/tmp.Yuovy0JzdA /tmp/tmp.ZNcnazMLZM

Results	Base	Patch	Ratio

babel-plugin: stylex.create
· basic create	615	611	0.99	-
· complex create	80	78	0.97	-

babel-plugin: stylex.createTheme
· basic themes	441	422	0.96	-
· complex themes	42	40	0.95	-

github-actions · 2025-10-30T16:29:07Z

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

[email protected] compare
node ./compare.js /tmp/tmp.nXT2jPfgm7 /tmp/tmp.kHpnuqgNKW

Results	Base	Patch	Ratio

@stylexjs/stylex/lib/cjs/stylex.js
· compressed	1,282	1,282	1.00
· minified	4,025	4,025	1.00

@stylexjs/stylex/lib/cjs/inject.js
· compressed	1,223	1,223	1.00
· minified	3,216	3,216	1.00

benchmarks/size/.build/bundle.js
· compressed	496,650	496,650	1.00
· minified	4,847,840	4,847,840	1.00

benchmarks/size/.build/stylex.css
· compressed	99,853	99,853	1.00
· minified	747,541	747,541	1.00

mellyeliu · 2025-10-30T17:43:37Z

packages/@stylexjs/babel-plugin/__tests__/legacy/transform-legacy-polyfills-test.js

              {
-                "ltr": ".xodj72a{clear:right}",
-                "rtl": ".xodj72a{clear:left}",
+                "ltr": ".xodj72a{clear:end}",


output needs to be: .xodj72a{clear: var(--stylex-logical-end)}

mellyeliu · 2025-10-30T17:44:51Z

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js


 import splitValue from '../utils/split-css-value';

+export const LOGICAL_FLOAT_START_VAR = '--stylex-logical-end';


add logic here to map float: start and float: inline-start to float: var(LOGICAL_FLOAT_START_VAR)

mellyeliu

Just missing the processStylexRules change that seem to be lost in the merge. Will stamp after that!

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js

…es, going to use it

mellyeliu

Awesome stuff. Thanks for sitting through all the iterations! Please add back the cleanup in generate-ltr and generate-lrtl before merging

* addressed Melissa' suggestions * More changes that are hopefully correct * Version that doesn't check for float and clear * The first version is probably correct as it passes all the other suites, going to use it * last bit of changes missed + updating tests --------- Co-authored-by: Anay Bhakat <[email protected]>

abhakat requested review from Jta26, ezzak, mellyeliu, necolas and vincentriemer as code owners September 22, 2025 21:32

meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 22, 2025

mellyeliu requested changes Sep 22, 2025

View reviewed changes

mellyeliu changed the title ~~Polyfill float values~~ [babel-plugin][legacy] Polyfill logical float values Sep 22, 2025

vercel bot deployed to Preview September 22, 2025 22:39 View deployment

mellyeliu reviewed Sep 22, 2025

View reviewed changes

vercel bot deployed to Preview September 23, 2025 05:09 View deployment

mellyeliu reviewed Sep 24, 2025

View reviewed changes

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js Outdated Show resolved Hide resolved

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js Outdated Show resolved Hide resolved

mellyeliu mentioned this pull request Oct 2, 2025

[babel-plugin] Polyfill logical styles for borderRadius #1265

Open

nmn reviewed Oct 3, 2025

View reviewed changes

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js Outdated Show resolved Hide resolved

abhakat force-pushed the polyfill-float-values branch from 22973bd to c95f91f Compare October 28, 2025 23:48

vercel bot had a problem deploying to Preview October 28, 2025 23:48 Failure

abhakat force-pushed the polyfill-float-values branch from c95f91f to 2dacb1e Compare October 30, 2025 16:24

mellyeliu reviewed Oct 30, 2025

View reviewed changes

addressed Melissa' suggestions

1bfaeb7

abhakat force-pushed the polyfill-float-values branch from 2dacb1e to 1bfaeb7 Compare October 31, 2025 20:47

vercel bot deployed to Preview October 31, 2025 20:48 View deployment

mellyeliu reviewed Oct 31, 2025

View reviewed changes

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js Outdated Show resolved Hide resolved

More changes that are hopefully correct

1c66f23

vercel bot deployed to Preview October 31, 2025 23:42 View deployment

Version that doesn't check for float and clear

6e1df99

vercel bot deployed to Preview October 31, 2025 23:53 View deployment

The first version is probably correct as it passes all the other suit…

f199010

…es, going to use it

vercel bot deployed to Preview November 1, 2025 00:05 View deployment

mellyeliu approved these changes Nov 3, 2025

View reviewed changes

last bit of changes missed + updating tests

6e84edd

vercel bot deployed to Preview November 4, 2025 22:03 View deployment

mellyeliu merged commit 825a79a into main Nov 5, 2025
9 checks passed

mellyeliu deleted the polyfill-float-values branch November 5, 2025 03:29


		import splitValue from '../utils/split-css-value';

		export const LOGICAL_FLOAT_START_VAR = '--stylex-logical-end';

[babel-plugin][legacy] Polyfill logical float values #1237

[babel-plugin][legacy] Polyfill logical float values #1237

Uh oh!

Conversation

abhakat commented Sep 22, 2025 • edited by mellyeliu Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed / motivation ?

Linked PR/Issues

Additional Context

Pre-flight checklist

Uh oh!

mellyeliu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mellyeliu Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mellyeliu commented Sep 22, 2025

Uh oh!

mellyeliu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

workflow: benchmarks/perf

Uh oh!

github-actions bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

workflow: benchmarks/size

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mellyeliu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mellyeliu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

abhakat commented Sep 22, 2025 •

edited by mellyeliu

Loading

mellyeliu Sep 22, 2025 •

edited

Loading

github-actions bot commented Oct 30, 2025 •

edited

Loading

github-actions bot commented Oct 30, 2025 •

edited

Loading